<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!-- 项目进度 -->
      <el-col :span="12">
        <el-calendar v-model="nowDate" class="test">
        </el-calendar>
        <el-button type="primary" icon="Search" @click="getDutyList">刷新</el-button>
        <el-table v-loading="loading" :data="dutyList">
          <el-table-column label="人员" align="center" prop="userName" width="80" />
          <el-table-column label="项目任务" align="center" prop="moduleName">
            <template #default="scope">
              <span>
                {{ scope.row.projectName + "→" + scope.row.taskName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="耗时" align="center" prop="useTime">
            <template #default="scope">
              <span>
                {{ scope.row.useTime }}天
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <!-- 日报分析-->
      <el-col :span="12">
        <div class="user-statistics-container">
          <el-card>
            <div class="user-statistics-title">
              <span> 本月统计</span>
            </div>
            <el-table :data="dutyStatisticsList">
              <el-table-column label="项目" align="center" prop="projectName" />
              <el-table-column label="进度" align="center" prop="totalTask">
                <template #default="scope">
                  <span>{{ scope.row.finishTask + "/" + scope.row.totalTask }}</span>
                </template>
              </el-table-column>
              <el-table-column label="本月完成" align="center" prop="mouthFinishTask" />
              <el-table-column label="本月费时" align="center" prop="useTime">
                <template #default="scope">
                  <span>{{ scope.row.useTime }}天</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { listDuty, getDutyStatistics } from "@/api/task/duty";
import { parseTime } from "@/utils/ruoyi";


const nowDate = ref(new Date());
const loading = ref(true);
const total = ref(0);
const selDate = ref(new Date());
//
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  dutyDate: ""
});
const dutyList = ref([]);
const dutyStatisticsList = ref([]);

/** 根据名称筛选部门树 */
watch(nowDate, val => {
  console.log('watch:=======');
  getDutyList();
});


/** 查询日报任务列表 */
function getDutyList() {
  loading.value = true;
  queryParams.value.dutyDate = parseTime(nowDate.value, "{y}-{m}-{d}");
  console.log('getDutyList Date:', queryParams.value.dutyDate);
  listDuty(queryParams.value).then(response => {
    dutyList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });

  //获取本月统计
  getMouthDutyStatistics();
}


function getMouthDutyStatistics() {
  let time = parseTime(new Date(), "{y}-{m}");
  console.log('getDutyStatistics time:', time);
  getDutyStatistics(time).then(response => {
    console.log('getDutyStatistics:', response);
    dutyStatisticsList.value = response.data;
  });
}

getDutyList();
getMouthDutyStatistics();

</script>

<style scoped lang="scss">
::v-deep .el-calendar {
  font-size: 14px;

  .next {
    border: none;
  }

  td {
    border: none;
  }

  .el-calendar__header {
    justify-content: space-between;
  }

  .el-calendar-day {
    height: 35px !important;
    text-align: center;
    border: none;
  }

  .is-selected {
    background-color: #1d8dd8;
    color: #fff;
  }
}


.user-statistics-container {
  height: 550px;
  overflow-y: auto;
}

.user-statistics {
  margin-bottom: 10px;
}

.user-statistics-title {
  display: flex;
  height: 40px;
  line-height: 40px;
  justify-content: center;
  color: #2b8cdc;
}
</style>